{% extends 'base.html' %}

{% block title %}盲盒内容管理 - {{ box.name }}{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">盲盒内容管理</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">首页</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('blind_box.index') }}">盲盒管理</a></li>
        <li class="breadcrumb-item active">盲盒内容管理</li>
    </ol>
    
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <i class="fas fa-box-open me-1"></i>
                {{ box.name }} - 内容配置
            </div>
            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addContentModal">
                <i class="fas fa-plus me-1"></i>添加内容
            </button>
        </div>
        <div class="card-body">
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>每个盲盒需要配置多种可能的内容，用户购买后将随机获得其中一种商品。
            </div>
            
            {% if contents %}
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>ID</th>
                            <th>商品名称</th>
                            <th>商品图片</th>
                            <th>品类</th>
                            <th>品牌</th>
                            <th>原价</th>
                            <th>数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for content in contents %}
                        <tr>
                            <td>{{ content.content_id }}</td>
                            <td>{{ content.product.name }}</td>
                            <td>
                                {% if content.product.image_url %}
                                <img src="{{ content.product.image_url }}" alt="{{ content.product.name }}" width="50" height="50" class="img-thumbnail">
                                {% else %}
                                <span class="text-muted">无图片</span>
                                {% endif %}
                            </td>
                            <td>{{ content.product.category }}</td>
                            <td>{{ content.product.brand }}</td>
                            <td>¥{{ content.product.original_price }}</td>
                            <td>{{ content.quantity }}</td>
                            <td>
                                <button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteContent({{ content.content_id }})">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>该盲盒尚未配置内容，请添加内容后才能提供给用户。
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 添加内容模态框 -->
<div class="modal fade" id="addContentModal" tabindex="-1" aria-labelledby="addContentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addContentModalLabel">添加盲盒内容</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addContentForm" action="{{ url_for('blind_box.add_content', box_id=box.box_id) }}" method="post">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="productSearch" class="form-label">搜索商品</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="productSearch" placeholder="输入商品名称、品牌或分类">
                            <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div id="searchResults" class="mb-3" style="max-height: 300px; overflow-y: auto; display: none;">
                        <div class="list-group" id="productList">
                            <!-- 搜索结果将通过JavaScript动态添加 -->
                        </div>
                    </div>
                    
                    <div id="selectedProduct" class="mb-3 p-3 border rounded" style="display: none;">
                        <div class="d-flex align-items-center">
                            <img id="selectedProductImage" src="" alt="商品图片" width="80" height="80" class="img-thumbnail me-3">
                            <div>
                                <h5 id="selectedProductName"></h5>
                                <p class="mb-1" id="selectedProductInfo"></p>
                                <p class="text-danger" id="selectedProductPrice"></p>
                            </div>
                        </div>
                    </div>
                    
                    <input type="hidden" id="productId" name="product_id">
                    
                    <div class="mb-3">
                        <label for="quantity" class="form-label">数量</label>
                        <input type="number" class="form-control" id="quantity" name="quantity" value="1" min="1" max="100">
                        <div class="form-text">设置每个盲盒中该商品的数量</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" id="saveButton" disabled>保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 删除内容确认
    function deleteContent(contentId) {
        if (confirm('确定要删除这个内容吗？此操作不可恢复。')) {
            window.location.href = "{{ url_for('blind_box.delete_content', box_id=box.box_id) }}" + "&content_id=" + contentId;
        }
    }
    
    // 商品搜索功能
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('productSearch');
        const searchButton = document.getElementById('searchButton');
        const searchResults = document.getElementById('searchResults');
        const productList = document.getElementById('productList');
        const selectedProduct = document.getElementById('selectedProduct');
        const productIdInput = document.getElementById('productId');
        const saveButton = document.getElementById('saveButton');
        
        // 搜索商品
        function searchProducts() {
            const searchTerm = searchInput.value.trim();
            if (searchTerm.length < 2) {
                alert('请输入至少2个字符进行搜索');
                return;
            }
            
            // 显示加载中
            productList.innerHTML = '<div class="text-center p-3"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">搜索中...</p></div>';
            searchResults.style.display = 'block';
            
            // 发送AJAX请求搜索商品
            fetch("{{ url_for('api.search_products') }}?q=" + encodeURIComponent(searchTerm))
                .then(response => response.json())
                .then(data => {
                    productList.innerHTML = '';
                    
                    if (data.products.length === 0) {
                        productList.innerHTML = '<div class="text-center p-3">没有找到匹配的商品</div>';
                        return;
                    }
                    
                    // 显示搜索结果
                    data.products.forEach(product => {
                        const listItem = document.createElement('a');
                        listItem.href = '#';
                        listItem.className = 'list-group-item list-group-item-action';
                        listItem.innerHTML = `
                            <div class="d-flex align-items-center">
                                <img src="${product.image_url || '/static/img/no-image.png'}" alt="${product.name}" width="50" height="50" class="img-thumbnail me-3">
                                <div>
                                    <h6>${product.name}</h6>
                                    <small>${product.category || '未分类'} | ${product.brand || '无品牌'}</small><br>
                                    <small class="text-danger">¥${product.original_price}</small>
                                </div>
                            </div>
                        `;
                        
                        // 点击选择商品
                        listItem.addEventListener('click', function(e) {
                            e.preventDefault();
                            
                            // 设置选中的商品
                            document.getElementById('selectedProductImage').src = product.image_url || '/static/img/no-image.png';
                            document.getElementById('selectedProductName').textContent = product.name;
                            document.getElementById('selectedProductInfo').textContent = `${product.category || '未分类'} | ${product.brand || '无品牌'}`;
                            document.getElementById('selectedProductPrice').textContent = `¥${product.original_price}`;
                            
                            // 设置商品ID并启用保存按钮
                            productIdInput.value = product.product_id;
                            saveButton.disabled = false;
                            
                            // 显示选中商品，隐藏搜索结果
                            selectedProduct.style.display = 'block';
                            searchResults.style.display = 'none';
                        });
                        
                        productList.appendChild(listItem);
                    });
                })
                .catch(error => {
                    console.error('搜索商品出错:', error);
                    productList.innerHTML = '<div class="text-center p-3 text-danger">搜索出错，请重试</div>';
                });
        }
        
        // 点击搜索按钮
        searchButton.addEventListener('click', searchProducts);
        
        // 回车搜索
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                searchProducts();
            }
        });
    });
</script>
{% endblock %} 